import React,{Component} from 'react';
import { connect } from 'react-redux';
import { action_user_changName, action_user_clearName } from '@store/action';
import { NavLink } from 'react-router-dom';

import {Button} from 'antd';

class Home extends Component {
    constructor(props) {
      super(props)
      this.state = {
        name: 'Jorn and Luce'
      }
    }
    componentWillMount() {
       console.log( this.props)
      // this.props.action_user_clearName(123)
    }
    clearName() {
      this.props.action_user_clearName('jieken').then(res=> {
        console.log(res)
      })
    }
    render() {
        return (
          <div>
            <h3>My name is {this.props.name}</h3>
            <ul>
              { this.props.list.map( (item,index) => {
                return (
                  <li key = {index}> 
                    <div>
                      <label htmlFor="">姓名：</label><span>{item.name}</span> 
                    </div>
                    <div>
                      <label htmlFor="">年龄：</label><span>{item.age}</span> 
                    </div>
                  </li>
                )
              })}
            </ul>
            <NavLink to='/'>12345667</NavLink>
            <Button onClick={()=> this.props.action_user_changName(this.state.name) }>改变名字</Button>
          
           
            <Button onClick={()=> this.clearName()} type="primary">清空名字</Button>
          </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        name: state.user.name,
        list: state.base.list
    }
  }

export default connect(mapStateToProps, { action_user_changName, action_user_clearName} )(Home);
